<template>
    <!-- 视图部分 -->
    <div class="main">
        <div class="header">
            <!-- 头部 -->
            <div class="nav">
                <!-- 返回功能 -->
                <div @click="goBack"><span class="iconfont icon-zuojiantou"></span></div>
                <div >{{ filmInfo.name }}</div>
            </div>
            <div>
                <img :src="filmInfo.poster"  width="100%"  alt="" />
            </div>
        </div>

        <div class="detail">
            <div style="display:flex;justify-content:space-between">
                <div class="name">{{ filmInfo.name }}</div>
                <div class="grade">{{ filmInfo.grade }}分</div>
            </div>
            <div class="det">{{ filmInfo.category }}</div>
            <div class="det">{{ filmInfo.premiereAt | parseTime }}上映</div>
            <div class="det">{{ filmInfo.nation }} | {{ filmInfo.runtime }}分钟</div>
            <div class="det t">{{ filmInfo.synopsis }}</div>
        </div>

        <div class="photos1">
            <!-- 图片区域（演职人员） -->
            <div class="person">
                演职人员
            </div>
            <div>
                <!-- 在这里输出可以滑动的图片信息 -->
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="item in filmInfo.actors" :key="item.name">
                            <img :src="item.avatarAddress" class="tu" />
                            <div class="one">{{ item.name }}</div>
                            <div class="one">{{ item.role }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="photos2">
            <div class="person">
                剧照
            </div>
            <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide tup" v-for="item,index in filmInfo.photos" :key="index">
                            <img :src="item" />
                        </div>
                    </div>
           </div>
        </div>
        <div class="footer">选座购票</div>
    </div>
</template>

<script>
// 逻辑部分
import Vue from 'vue';
import { Swipe, SwipeItem ,Toast} from 'vant';
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Toast);
import uri from "@/config/uri";
// 导入moment
import moment from "moment";
// 导入swiper相关的外部文件
import Swiper from "swiper";
import "swiper/swiper-bundle.min.css";

export default {
    data() {
        return {
            filmInfo: {},
        };
    },
    // 获取数据
    created() {
        // 通知事件中心隐藏底部导航
        // this.$eventBus.$emit("toggleFooter", false);
        // vuex修改数据源
        this.$store.commit("common/setIsShow", false);

        // 获取电影的id号（获取时参数名称要与路由规则中声明的一致）
        let filmId = this.$route.params.film_id;
        this.$http.get(uri.getDetail + "?filmId=" + filmId).then((ret) => {
            // console.log(ret.data.film);
            this.filmInfo = ret.data.film;
            // 产生滑动图片组
            this.$nextTick(() => {
                new Swiper(".swiper-container", {
                    slidesPerView: 4,
                    spaceBetween: 15,
                });
            });
        });
    },
    beforeDestroy() {
        // 在将要离开该组件的时候通知事件中心将底部导航放出来
        // this.$eventBus.$emit("toggleFooter", true);

        this.$store.commit("common/setIsShow", true);
    },
    methods: {
        // 返回上一页
        goBack() {
            this.$router.go(-1);
        },
        onChange(index) {
            Toast('当前 Swipe 索引：' + index);
        },
    },

    // 过滤器
    filters: {
        // 修饰上映时间
        parseTime(timestamp) {
            // moment作为js包，这里时间戳处理单位为毫秒
            return moment(timestamp * 1000).format("YYYY-MM-DD");
        },
    },
};
</script>

<style scoped>
/* 样式部分 */

.nav{
    width:100%;
    box-sizing:border-box;
    padding:12px 8px;
    font-size:18px;
    position:fixed;
    background:white;
    
}
.nav div:nth-child(1){
    width:10%;
    float:left;
}
.nav div:nth-child(2){
    float:right;
    width:90%;
    text-align: center;
    /* padding-left:50px; */
}
.tu{
    width:23%;
    margin-right:10px;
}
.iconfont.icon-zuojiantou{
    font-size:25px;
}
.image{
    width:100%;
    height:100px;
}
.name{
    padding:10px 10px 0px 10px;
    font-size:18px;
}
.tup{
    width:250px;
    /* padding:10px; */
    height:80px;
}
.tup img{
    width:100%;
    height:50px;
}
.grade{
    padding:10px;
    font-style:italic;
    color:orange;
    font-size:18px;
}

.det{
    font-size:14px;
    color:#999;
    padding:2px 10px;
}
.t{
    padding-top:10px;
}
.tu{
    width:100%;
    height:100%;
}
.one{
    font-size:14px;
    text-align: center;
}
.photos1{
    margin-top:10px;
    padding:0 10px;
}
.photos2{
    margin-top:20px;
    padding:0 10px;
    margin-bottom:30px;
}
.person{
    margin-bottom:10px;
}
.footer{
    position: fixed;
    bottom: 0;
    left: 0;
    height: 49px;
    width: 100%;
    text-align: center;
    background-color: #ff5f16;
    color: #fff;
    font-size: 16px;
    line-height: 49px;
    z-index:99999;
}
</style>
